<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>寻健康达人，为山东鼓劲</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="css/weui.min.css" />   
    <script type="text/javascript" src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/common.js"></script>		<script src="js/constants.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    
    mui.init({
      gestureConfig:{
        hold:true,
        release:true
      }
    });
    mui.ready(function(){
      mui(".mui-scroll-wrapper").scroll();
      mui(".mui-scroll-wrapper")[0].addEventListener('hold', function(){
        swiper.noSwiping = true;
      });
      mui(".mui-scroll-wrapper")[0].addEventListener('release', function(){
        swiper.noSwiping = false;
      });
      mui(".mui-scroll-wrapper").scroll();             /*添加文章点击监听*/     mui("#cities-wrapper").on('tap', 'a' ,function(event){     		var name = this.innerText;     		console.log("name = "+name);     		showFoodOrderWrapper(name);     });
    });
    
    // the object to store userInfo
    var userInfoObj = null;
    var openid = null;
    var swiper = null;
    
    var redirectToOauth = function () {
      location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8be05afa2161d315&redirect_uri=http://www.imdcfz.com&response_type=code&scope=snsapi_userinfo&state=success#wechat_redirect';
    };
    
    (function () {
      // check if url contain openid
      var search = location.search;
      search && search.length && (search = search.substring(1));
      
      var params = search.split('&');
      params.forEach(function (param) {
        var keyVal = param.split('=');
        if (!keyVal || !keyVal.length) return;
        if (keyVal[0].toLowerCase() == 'openid') {
          openid = keyVal.length == 1 ? '' : keyVal[1];
        }
      });
      if (!!openid) {
        // found openid
  		// try to get user's info
        $.ajax({
          method: 'get',
          url: 'user',
          data: { openId: openid },
          success: function (data) {
            try {
              var dataObj = JSON.parse(data);
              if (dataObj.code == 0) {
                // success get user info
              var bodyObj = dataObj.body;
                userInfoObj = {};
                Object.keys(bodyObj).forEach(function (key) {
                  userInfoObj[key] = bodyObj[key];
                });
                // set the lucky area visible or invisible
                initLuckyWrapper();
                // update userInfo
                updateUserInfo();
              } else {
                errToast($('#err-toast'), $('#err-toast-content'), dataObj.msg);
                if (dataObj.body) {
                  if (dataObj.body.noOpenId || dataObj.body.notRegistered) {
                    // no openid found, or not registered
                    // redirect to oauth page and then redirect to index page
                    setTimeout(redirectToOauth, 2000);
                  }
                }
              }
            } catch (e) {
              errToast($('#err-toast'), $('#err-toast-content'), JSON.stringify(e));
            }
          },
          error: function (data, textStatus) {
            errToast($('#err-toast'), $('#err-toast-content'), textStatus || data.statusText);
          }
        });
        
        // get config for wechat js api
        $.ajax({
          type: 'get',
          url: 'config',
          data: { url: location.href ? location.href.split('#')[0] : '' },
          success: function (data) {
            try {
              var dataObj = JSON.parse(data);
              if (dataObj.code == 0 && dataObj.body) {
                var dataBody = dataObj.body;
                wx.config({
                  debug: false,
                  appId: dataBody.appId,
                  timestamp: dataBody.timestamp,
                  nonceStr: dataBody.nonceStr,
                  signature: dataBody.signature,
                  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'addCard']
                });
                $('#info-share-button') && $('#info-share-button').click(function () {
                  showShareWrapper();
                });
              } else {
                errToast($('#err-toast'), $('#err-toast-content'), dataObj.msg);
              }
            } catch (e) {
              errToast($('#err-toast'), $('#err-toast-content'), JSON.stringify(e));
            }
          },
          error: function (data, textStatus) {
            errToast($('#err-toast'), $('#err-toast-content'), textStatus || data.statusText);
          }
        });
      } else {
        // no openid found, redirect to authorize page
        redirectToOauth();
      }
    })();
    
    wx.ready(function () {
      wx.onMenuShareTimeline({
        title: '寻健康达人，为山东鼓劲',
        desc: '您的好友距离健康达人还有百步之遥，需要您的助力！',
        link: 'http://www.imdcfz.com/support.html' + (userInfoObj ? ('?candidate=' + userInfoObj.openId) : ''),
        //imgUrl: userInfoObj ? userInfoObj.avatar : 'http://www.imdcfz.com/img/lucky-share-default.png',
        imgUrl: 'http://www.imdcfz.com/img/lucky-share-default.png',
        cancel: function () {
          errToast($('#err-toast'), $('#err-toast-content'), '取消分享');
        },
        fail: function () {
          errToast($('#err-toast'), $('#err-toast-content'), '分享失败');
        },
        trigger: function () {
          $('#share-wrapper').hide();
        }
      });
      
      wx.onMenuShareAppMessage({
        title: '寻健康达人，为山东鼓劲',
        desc: '您的好友距离健康达人还有百步之遥，需要您的助力！',
        link: 'http://www.imdcfz.com/support.html' + (userInfoObj ? ('?candidate=' + userInfoObj.openId) : ''),
        //imgUrl: userInfoObj ? userInfoObj.avatar : 'http://www.imdcfz.com/img/lucky-share-default.png',
        imgUrl: 'http://www.imdcfz.com/img/lucky-share-default.png',
        cancel: function () { 
          errToast($('#err-toast'), $('#err-toast-content'), '取消分享');
        },
        fail: function () {
          errToast($('#err-toast'), $('#err-toast-content'), '分享失败');
        },
        trigger: function () {
          $('#share-wrapper').hide();
        }
      });
    });
    
    var initLuckyPage = function () {
      initCitiesScroll();
      ajaxGet(1);
    };
    </script>
  </head>

  <body onload="initLuckyPage()">
  <div class='off rotate' id='audio_btn' style='display:block;' onclick="playorPause()">
      <audio id='media' src="http://www.imdcfz.com/sound/bgsound.mp3" preload=""
      autoplay="" loop=""></audio>
    </div>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide result" id="result-5">
          <div id="lucky-machine-wrapper">
            <div id="lucky-machine">
              <div class="border-left"></div>
              <div class="border-top"></div>
              <div class="border-right"></div>
              <div class="border-bottom"></div>
              <div class="lucky-wheel">
                <div class="lucky-screen-wrapper">
                  <div class="lucky-screen-single" id="lucky-screen-single-0">
                    <div class="lucky-screen-inner" id="lucky-wheel-0">
                      <img src="img/lucky-prize-0.png">
                      <img src="img/lucky-prize-2.png">
                      <img src="img/lucky-prize-1.png">
                      <img src="img/lucky-prize-0.png">
                    </div>
                  </div>
                  <div class="lucky-screen-single" id="lucky-screen-single-1">
                    <div class="lucky-screen-inner" id="lucky-wheel-1">
                      <img src="img/lucky-prize-1.png">
                      <img src="img/lucky-prize-0.png">
                      <img src="img/lucky-prize-2.png">
                      <img src="img/lucky-prize-1.png">
                    </div>
                  </div>
                  <div class="lucky-screen-single" id="lucky-screen-single-2">
                    <div class="lucky-screen-inner" id="lucky-wheel-2">
                      <img src="img/lucky-prize-2.png">
                      <img src="img/lucky-prize-1.png">
                      <img src="img/lucky-prize-0.png">
                      <img src="img/lucky-prize-2.png">
                    </div>
                  </div>
                </div>
                <div class="lucky-result-wrapper">
                  <img src="img/lucky-ticket-mouth.png" class="lucky-ticket-mouth" />
                  <div class="lucky-bar-wrapper">
                    <div class="lucky-bar-mouth"></div>
                    <img src="img/lucky-bar.png" class="lucky-bar" id="lucky-bar" />
                  </div>
                  <div class="lucky-ticket-wrapper">
                    <img src="img/lucky-ticket-prompt.png" id="lucky-ticket" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="index-lucky-rule-wrapper">
            <img src="img/lucky-1.png" />
          </div>
        </div>
        
        <div class="swiper-slide result" id="result-6">
          <div id="lucky-info-wrapper">
            <img src="img/lucky-info-title.png" id="lucky-info-title"/>
            <div class="user-info-avatar-wrapper">
              <div class="user-info-avatar-inline-wrapper">
                <img src="img/lucky-info-default-avatar.png" id="lucky-info-avatar" />
                <img src="img/lucky-info-avatar-icon.png" id="lucky-info-avatar-icon" />
              </div>
            </div>
            <div class="user-info-wrapper">
              <div class="left-top"></div>
              <div class="top"></div>
              <div class="right-top"></div>
              <div class="right"></div>
              <div class="right-bottom"></div>
              <div class="bottom"></div>
              <div class="left-bottom"></div>
              <div class="left"></div>
              <div class="user-info-inner">
                <div class="user-name-wrapper">姓名：<span id="user-name"></span></div>
                <div class="info-tag-wrapper">
                  <div class="left-top"></div>
                  <div class="top"></div>
                  <div class="right-top"></div>
                  <div class="right"></div>
                  <div class="right-bottom"></div>
                  <div class="bottom"></div>
                  <div class="left-bottom"></div>
                  <div class="left"></div>
                  <div class="info-tag" id="info-tag"></div>
                </div>
              </div>
              <div class="info-wow-wrapper">
                <img src="img/info-wow.png"/>
              </div>
            </div>
          </div>
          <div id="info-share-wrapper">
            <a class="btn" id="info-share-button">点击分享，邀请投票</a>
          </div>
          <div id="share-wrapper">
            <div class="share-wrapper-content">
              <img src="img/lucky-share-icon.png" class="lucky-share-icon"/>
              <div class="lucky-share-slogon">
                <p>分享到朋友圈或发送给好友</p>
                <p>邀请小伙伴们给你加油鼓<span>劲</span>吧</p>
              </div>
            </div>
            <img src="img/lucky-share-angle.png" class="lucky-share-angle"/>
          </div>
        </div>
       
        <div class="swiper-slide result" id="result-8">
          <div id="rank-top-wrapper">
            <div id="rank-title-wrapper">
              <div class="rank-btns-wrapper">
                 <a class="btn active">健康达人</a>
                 <a class="btn" onclick="jumpToSwipe(3)">齐鲁美食</a>
                 <a class="btn" onclick="jumpToSwipe(4)">活动说明</a>
               </div>
              <img src="img/rank-title.png" />
            </div>
            <!-- 可滚动区域 -->
            <div id="rank-wrapper" class='mui-scroll-wrapper swiper-no-swiping'>
              <div class = 'mui-scroll'>
                <div class="query-rank-wrapper"><input id="query-rank-input" /><a class="btn" id="query-rank-btn" onclick="ajaxGet(1)"></a></div>
                <div id="rank-result-wrapper"></div>
                <div id="rank-result-pagination"></div>
              </div>
            </div>
            <div id="load-rank-wrapper">
              <div class="load-rank-inner">
                <img src="img/loading.png" class="load-rank-icon"/>
                <p>加载中...</p>
              </div>
            </div>
          </div>
          <div id="rank-foot-wrapper"><img src="img/food-foot.png" /></div>
        </div>
        <div class="swiper-slide result" id="result-9">
          <div id="food-title-wrapper">
            <div class="rank-btns-wrapper">
              <a class="btn" onclick="jumpToSwipe(2)">健康达人</a>
              <a class="btn active">齐鲁美食</a>
              <a class="btn" onclick="jumpToSwipe(4)">活动说明</a>
            </div>
            <img src="img/rank-title.png" />
          </div>
          <div id="cities-wrapper">
            <div id="cities-inner">
              <div class="prompt-area"><span>点击下方城市名称，寻找齐鲁美食</span></div>
              <a class="btn">济南</a>
              <a class="btn">青岛</a>
              <a class="btn">菏泽</a>
              <a class="btn">临沂</a>
              <a class="btn">济宁</a>
              <a class="btn">烟台</a>
              <a class="btn">潍坊</a>
              <a class="btn">滨州</a>
              <a class="btn">淄博</a>
              <a class="btn">德州</a>
              <a class="btn">聊城</a>
              <a class="btn">东营</a>
              <a class="btn">泰安</a>
              <a class="btn">威海</a>
              <a class="btn">日照</a>
              <a class="btn">枣庄</a>
              <a class="btn">新泰</a>
              <a class="btn">莱芜</a>
              <a class="btn">海阳</a>
              <a class="btn">荣成</a>
              <a class="btn">博兴</a>
              <a class="btn">鱼台</a>
              <a class="btn">城阳</a>
              <a class="btn">济阳</a>
              <a class="btn">淄川</a>
              <a class="btn">滕州</a>
              <a class="btn">巨野</a>
              <a class="btn">单县</a>
              <a class="btn">郯城</a>
              <a class="btn">嘉祥</a>
              <a class="btn">兰陵</a>
              <a class="btn">寿光</a>
              <a class="btn">青州</a>
              <a class="btn">胶州</a>
              <a class="btn">黄岛</a>
              <a class="btn">岚山</a>
            </div>
          </div>
          <div id="food-order-wrapper" class='mui-scroll-wrapper swiper-no-swiping'>
          <div class = 'mui-scroll'>
  
            <div class="food-line">              <a id="0" class="btn">烧烤第一期</a>              <a id="1" class="btn">烧烤第二期</a>            </div>            <div class="food-line">              <a id="2" class="btn">龙虾第一期</a>              <a id="3" class="btn">龙虾第二期</a>            </div>            <div class="food-line">              <a id="4" class="btn">海鲜第一期</a>              <a id="5" class="btn">海鲜第二期</a>            </div>                          <div class="food-line">            	<button class="btn" onclick="closeFoodOrderWrapper()">返回</button>            </div>
             </div>                
          </div>
          <div id="food-foot-wrapper" onclick="linkTo(100)"><img src="img/food-root.png" /></div>
        </div>
        <!-- 活动说明 -->
        <div class="swiper-slide result" id="result-10">
          <div id="rule-title-wrapper">
            <div class="rank-btns-wrapper">
              <a class="btn" onclick="jumpToSwipe(2)">健康达人</a>
              <a class="btn" onclick="jumpToSwipe(2)">齐鲁美食</a>
              <a class="btn active">活动说明</a>
             </div> 
            <img src="img/rank-title.png" />                     
          </div>
          <!-- 可滚动区域 -->
          <div id="rules-wrapper" class='mui-scroll-wrapper swiper-no-swiping'>
              <div class = 'mui-scroll'>
                <div id="rule-1-wrapper"><img src="img/rule-1.png"/></div>
                <div id="rule-2-wrapper"><img src="img/rule-2.png"/></div>
                <div id="rule-3-wrapper"><img src="img/rule-3.png"/></div>
                <div id="rule-4-wrapper"><img src="img/rule-4.png"/></div>
              </div>
          </div> 
          <div id="rule-foot-wrapper"><img src="img/food-root.png" /></div>
        </div>  
      </div>
    </div>
    
    <!-- Error Toast -->
    <div id="err-toast" style="display:none;">
      <div class="weui_mask_transparent"></div>
      <div class="weui_toast">
        <i class="weui_icon_warn"></i>
        <p class="weui_toast_content" id="err-toast-content">错误</p>
      </div>
    </div>
    <!-- Success Toast -->
    <div id="success-toast" style="display:none;">
      <div class="weui_mask_transparent"></div>
      <div class="weui_toast">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content" id="success-toast-content">成功</p>
      </div>
    </div>
    <script type="text/javascript">
    swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      mousewheelControl: true,
      watchSlidesProgress: true,
    });
    </script>
  </body>
</html>